import logo from './logo.svg';
import './App.css';
// import NewCard from './components/NewCard';
// import LikesButton from './components/LikesButton';
// import DigitalClock from './components/DigitalClock';
import CommentBox from './components/CommentBox';
import CommentList from './components/ComentsList'
import Xiaojiejie from './jspang/Xiaojiejie'
import { Component } from 'react';
//context对象用于组件中传值
import ThemeContext from './theme-context';
import ThemedBar from './components/ThemeBar';

// function App() {
//   const tags =['恐龙','足球小子足球']
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//       <NewCard name="viking" number={111245} isHuman tags={tags} />
//       <LikesButton />
//       <DigitalClock />
//       <CommentBox />
//     </div>
//   );
// }
const themems ={
  light:{
    className:'btn btn-primary',
    bgColor:'#eeeeee',
    color:'#000'
  },
  dark:{
    className:'btn btn-light',
    bgColor:'#222222',
    color:'#fff'
  }
}
class App extends Component{
  constructor(props){
    super(props)
    this.state ={
      comments:['this is my first replay','888888'],
      theme:'light'
    }
    this.addComments = this.addComments.bind(this)
    this.onDelete = this.onDelete.bind(this)
  }
  addComments(value){
    this.setState({
      comments:[...this.state.comments,value]
    })
  }
  onDelete(index){
    this.state.comments.splice(index,1)
    this.setState({
      comments:this.state.comments
    })
  }
  changeTheme(theme){
    this.setState({
      theme,
    })
  }
  render(){
      const { comments } = this.state
    return(
      <ThemeContext.Provider value={themems[this.state.theme]}>
          <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <CommentList comments={comments} onDelete={this.onDelete}/>
      <CommentBox
       commentsLength={comments.length} 
       onAddComments={this.addComments}
        />
        <footer>
          <a href="#theme-switcher" className="btn btn-light" onClick={()=>(this.changeTheme('light'))}>浅色主题</a>
          <a href="#theme-switcher" className="btn btn-secondary" onClick={()=>(this.changeTheme('dark'))}>深色主题</a>
        </footer>
        <ThemedBar/>
    </div>
      </ThemeContext.Provider>
  
    )
  }
}
export default App;
